<template>
  <div v-transfer-dom>
    <popup v-model='popShow' height='60%'>
      <div class='pop-header'>
        <div class='pop-header-left' @click='popShow = false'>
          <slot name='left-text'>取消</slot>
        </div>
        <div class='pop-header-title'>
          <slot name='title'>{{ title }}</slot>
        </div>
        <div class='pop-header-right' @click="checkDone()">
          <slot name='right-text'>确定</slot>
        </div>
      </div>
      <div class="pop-cont">
        <ul v-if="filterType == 1">
          <li v-for="(item, idx) in fData" :key="idx" :class="checkList.indexOf(item.id) >= 0 ? 'active': ''" @click="checkFilter(item.id)">
            {{item.areaName}}
            <i class="iconfont icon-gou i-gou"></i>
          </li>
        </ul>
        <ul v-if="filterType == 2">
          <li v-for="(item, idx) in fData" :key="idx" :class="checkList.indexOf(item.id) >= 0 ? 'active': ''" @click="checkFilter(item.id)">
            {{item.levelName}}
            <i class="iconfont icon-gou i-gou"></i>
          </li>
        </ul>
        <ul v-if="filterType == 3">
          <li v-for="(item, idx) in fData" :key="idx" :class="checkList.indexOf(item) >= 0 ? 'active': ''" @click="checkFilter(item)">
            {{item}}
            <i class="iconfont icon-gou i-gou"></i>
          </li>
        </ul>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  props: ['title'],
  data () {
    return {
      popShow: false,
      fData: [],
      checkList: [],
      filterType: 1
    }
  },
  methods: {
    setFilterData (type, fData, checkList) {
      this.popShow = true
      this.checkList = []
      this.filterType = type
      this.fData = fData
      this.checkList = checkList
    },
    checkFilter (id) {
      if (this.checkList.indexOf(id) < 0) {
        this.checkList.push(id)
      } else {
        this.checkList.splice(this.checkList.indexOf(id), 1)
      }
    },
    checkDone () {
      this.popShow = false
      this.$emit('onClickRight', this.filterType, this.checkList)
    }
  }
}
</script>

<style lang='scss' scoped>
@import '@/assets/css/common/_vars.scss';
.pop-header {
  display: flex;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  background-color: $def-bg;
  border-bottom: 1px solid #ccc;
  .pop-header-title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: center;
    color: #222;
  }
  .pop-header-left {
    padding-left: 15px;
    color: $gray;
  }
  .pop-header-right {
    padding-right: 15px;
    color: $light-blue;
  }
}
.pop-cont{
  background-color: $def-bg;
  height: calc(100% - 40px);
  overflow-y: auto;
  li{
    padding: 10px 15px;
    position: relative;
    align-items: center;
    font-size: 14px;
    .i-gou{
      position: absolute;
      right: 15px;
      top: 10px;
      font-size: 20px;
      color: $light-blue;
      display: none;
    }
    &.active{
      .i-gou{
        display: block;
      }
    }
    &:after{
      content: " ";
      position: absolute;
      bottom: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #d9d9d9;
      color: #d9d9d9;
      transform-origin: 0 0;
      transform: scaleY(.5);
      left: 15px;
    }
  }
}
</style>
